<template>
  <view class="recommend-container">
    <view class="section-title">相关推荐</view>

    <!-- 推荐商品列表 -->
    <view class="recommend-grid">
      <view
        class="product-item"
        v-for="(item, index) in recommendList"
        :key="index"
        @click="navigateToDetail(item.id)"
      >
        <image :src="item.image" mode="aspectFill" class="product-image"></image>
        <view class="product-info">
          <text class="product-title">{{ item.title }}</text>
          <view class="product-meta">
            <text class="product-price">¥{{ item.price }}</text>
            <text class="product-sales">已售 {{ item.sales }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <u-empty
      v-if="recommendList.length === 0 && !isLoading"
      mode="search"
      icon="http://cdn.uviewui.com/uview/empty/search.png"
      text="暂无相关推荐"
    ></u-empty>

    <!-- 加载提示 -->
    <u-loadmore
      v-if="isLoading"
      status="loading"
      loading-text="加载中..."
    ></u-loadmore>

  </view>
</template>

<script>
export default {
  data() {
    return {
      productId: '',
      recommendList: [],
      isLoading: false
      // No pagination needed usually for a small recommendation list
    }
  },
  onLoad(options) {
    if (options.productId) {
      this.productId = options.productId
      this.loadRecommendations()
    } else {
      uni.showToast({ title: '缺少商品ID', icon: 'error' })
      uni.navigateBack()
    }
  },
  methods: {
    async loadRecommendations() {
      this.isLoading = true
      try {
        // Assuming an API endpoint /products/{id}/recommendations exists
        const res = await this.$api.get(`/products/${this.productId}/recommendations`, {
          // Optional params like limit
          params: { limit: 10 } 
        })
        this.recommendList = res.data
      } catch (error) {
        console.error('加载相关推荐失败:', error)
        uni.showToast({ title: '加载推荐失败', icon: 'error' })
      } finally {
        this.isLoading = false
      }
    },
    navigateToDetail(id) {
      // Navigate to product detail page, replace if already on a detail subpage
      uni.redirectTo({
        url: `/pages/product/detail/index?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .product-image {
    width: 100%;
    height: 345rpx; // Maintain aspect ratio
  }

  .product-info {
    padding: 20rpx;

    .product-title {
      font-size: 28rpx;
      color: #333;
      @include text-ellipsis(2); // Requires a mixin or helper
      margin-bottom: 10rpx;
      height: 80rpx; // Fixed height for 2 lines
      line-height: 1.4;
    }

    .product-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10rpx;

      .product-price {
        font-size: 32rpx;
        color: #ff5500;
        font-weight: bold;
      }

      .product-sales {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}
</style> 